<template>
    <view class="center">
        <view class="flex-box" @click="show = !show">
            <view class="">
                <text style="color: #FF0000; margin-right: 10rpx;">*</text>
                服务门店
            </view>
            <view class="">
                <input type="text" v-model="serveName" disabled="" placeholder="请输入门店" style="float: right;text-align: right;" />
            </view>
        </view>

        <view class="flex-box">
            <view class="">
                <text style="color: #FF0000; margin-right: 10rpx;">*</text>
                姓名:
            </view>
            <view class="">
                <input type="text" v-model="name" placeholder="请输入姓名" style="float: right;text-align: right; font-weight: 600;" />
            </view>
        </view>

        <view class="flex-box">
            <view class="">
                <text style="color: #FF0000; margin-right: 10rpx;">*</text>
                电话:
            </view>
            <view class="">
                <input type="text" v-model="phone" placeholder="请输入电话" style="float: right;text-align: right; font-weight: 600;" />
            </view>
        </view>

        <view class="flex-box">
            <view class="">
                <text style="color: #FF0000; margin-right: 10rpx;">*</text>
                车牌:
            </view>
            <view class="">
                <input type="text" v-model="licencePlate" placeholder="请输入车牌" style="float: right;text-align: right; font-weight: 600;" />
            </view>
        </view>

        <view class="flex-box">
            <view class="">
                <text style="color: #FF0000; margin-right: 10rpx;">*</text>
                车型:
            </view>
            <view class="">
                <input type="text" v-model="plateClass" placeholder="请输入车型" style="float: right;text-align: right; font-weight: 600;" />
            </view>
        </view>

        <view class="flex-box">
            <view class="">
                <text style="color: #FF0000; margin-right: 10rpx;">*</text>
                地址:
            </view>
            <view class="">
                <input type="text" v-model="valText" placeholder="请输入地址" style="float: right;text-align: right; font-weight: 600;" />
            </view>
        </view>

        <view class="flex-box">
            <view class="">
                <text style="color: #FF0000; margin-right: 10rpx;">*</text>
                装饰美容:
            </view>
            <view class="">
                <input type="text" v-model="insurance" placeholder="请输入美容方式" style="float: right;text-align: right; font-weight: 600;" />
            </view>
        </view>

        <view class="add" @tap="addPut">确定</view>
        <u-popup v-model="show" mode="bottom" border-radius="14" width="750rpx" height="60%">
            <scroll-view scroll-y="true" style="height: 60%;">
                <block v-for="(item, index) in list" :key="index">
                    <view class="padding f f-d  solid-bottom" @click="getShop(item.name)">
                        <text class="text-black t-bold text-xl ">{{ item.name }}</text>
                        <text class="margin-top-sm margin-left">
                            <text class="cuIcon-location margin-right"></text>
                            {{ item.address }}
                        </text>

                        <text class="margin-top-sm margin-left">
                            <text class="cuIcon-phone margin-right"></text>
                            {{ item.phone }}
                        </text>
                    </view>
                </block>
            </scroll-view>
        </u-popup>
    </view>
</template>

<script>
export default {
    data() {
        return {
            serveName: '',
            licencePlate: '',
            plateClass: '',
            name: '',
            phone: '',
            insurance: '',
            valText: '',
            sku_price_id: '',

            show: false,
            list: [],
        };
    },
    onLoad() {
        this.getList();
        this.getAStore();
    },
    methods: {
        ///addons/shopro/order/getShops
        async getAStore() {
            const res = await this.$request.post('addons/shopro/order/getShops', {});
            this.list = res.data.data;
            console.log('res2222222: ', res);
        },
        getShop(name) {
            this.serveName = name;
            this.show = false;
        },

        async addPut() {
            if (
                this.serveName == undefined ||
                this.licencePlate == undefined ||
                this.plateClass == undefined ||
                this.name == undefined ||
                this.phone == undefined ||
                this.insurance == undefined ||
                this.valText == ''
            ) {
                return uni.showToast({
                    title: '内容不能为空!',
                    icon: 'none',
                });
            }

            try {
                const res = await this.$request.post('addons/shopro/order/createOrder', {
                    data: {
                        goods_list: [
                            {
                                goods_id: 29, // 固定id
                                goods_num: 1,
                                sku_price_id: this.sku_price_id, // 拉去接口得到 id
                                goods_price: '0',
                            },
                        ],
                        extt: {
                            serveName: this.serveName, //产品id
                            licencePlate: this.licencePlate,
                            plateClass: this.plateClass, //规格id
                            name: this.name, //规格id
                            phone: this.phone, //规格id
                            insurance: this.insurance,
                            valText: this.valText,
                        },
                        goods_type: 'xiche',
                        coupons_id: 0,
                        yuyueshijian: 0,
                        phone: 1,
                        consignee: '1',
                        from: '1',
                        order_imge: 1,
                    },
                });
                uni.showToast({
                    title: res.data.msg,
                    icon: 'none',
                });
                setTimeout(() => {
                    uni.navigateBack({
                        detail: 1,
                    });
                }, 500);
            } catch (e) {
                uni.showToast({
                    title: res.msg,
                    icon: 'none',
                });
            }
        },

        async getList() {
            const { data: res } = await this.$request.post('addons/shopro/goods/detail?id=29', {});
            this.sku_price_id = res.data.sku_price[0].yanseList.id;
            console.log(res.data.sku_price[0].yanseList.id);
        },
    },
};
</script>

<style lang="scss" scoped>
.center {
    padding: 0 30rpx;

    .flex-box {
        height: 90rpx;
        margin-top: 10rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1rpx solid #eeeeee;
    }

    .flex-spa {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;

        view {
            width: 30%;
            margin: 10rpx 0;
            padding: 10rpx 20rpx;
            border-radius: 30rpx;
            text-align: center;
            border: 1rpx solid #ee9900;
        }
    }

    .input-center1 {
        padding-top: 20rpx;
        width: 96%;
        height: 500rpx;

        input {
            width: 100%;
            height: 100%;
        }
    }

    .add {
        position: fixed;
        bottom: 0;
        left: 50%;
        width: 90%;
        height: 100rpx;
        color: #ffffff;
        transform: translateX(-50%);
        text-align: center;
        line-height: 100rpx;
        background-color: #ff0000;
        margin: 0 auto 60rpx;
        border-radius: 50rpx;
    }
}
</style>
